<!-- 学生用户登录页面 -->
<template>
  <el-container>
    <el-header class="header" width="400px">
      <h1>学生公寓分配管理系统——学生端</h1>
    </el-header>
    <el-main class="login">
      <el-form :label-position="labelPosition" label-width="60px  " :model="user">
        <el-form-item label="学号">
          <el-input v-model="user.sid" type="text" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-link type="primary" style="float:right;" @click="forgetPassword">忘记密码</el-link>
        <el-form-item>
          <el-button type="primary" style="width:60%; margin: 30px;" @click="stuLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {ElMessage} from 'element-plus'
import axios from 'axios'

export default {
  data() {
    return {
      labelPosition: 'right',
      user: {
        sid: '',
        password: ''
      }
    }
  },
  methods: {

    // 学生用户登录
    stuLogin() {

      // 判断学号是否为空
      if (this.user.sid == '') {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '请输入学号',
          type: 'error',
        })
        return;
      }
      // 判断密码是否为空
      if (this.user.password == '') {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '请输入密码',
          type: 'error',
        })
        return;
      }


      let postData = new URLSearchParams();
      postData.append('sid', this.user.sid);
      postData.append('password', this.user.password);

      let that = this.$router;

      axios.post("/stu/login",postData)
        .then(function(res) {
          console.log(res.data);
          if (res.data.status == 10000) {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '登录成功',
              type: 'success',
            })
            sessionStorage.setItem("sid", res.data.data.sid);
            sessionStorage.setItem("name", res.data.data.name);
            that.push("/");

          } else if (res.data.status == 10006) {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '学号或密码错误！',
              type: 'error',
            })
          } else {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '登录失败，系统异常',
              type: 'error',
            })
          }
        })
    },

    // 忘记密码
    forgetPassword() {
      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '请联系宿舍管理员重置密码，谢谢！',
        type: 'error',
      })
    }
  }
}
</script>

<style scoped>
.el-header {
  text-align: center;
  margin-top: 60px;
}
.login {
  width: 400px;
  margin: 80px auto;
}
</style>